<template>
  <div>
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#FFFFFF"
      text-color="#333333"
      active-text-color="#2087D0"
      :default-active="activeId"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-menu-item
        v-for="item in nr"
        :key="item.value"
        :index="item.status"
        :class="activeId == item.value ? 'is-active' : ''"
        @click.native="enter(item.value)"
      >
        <img class="img" :src="require('@/static/' + item.img)" alt="" />
        <span>{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeId: "1",
      nr: [
        {
          img: "mulu/wangdiancaiwu.png",
          name: "网点财务",
          value: 1,
          status: "1",
        },
        {
          img: "mulu/zongbucaiwu.png",
          name: "总部财务",
          value: 2,
          status: "2",
        },
        {
          img: "mulu/zhikongzhongxin.png",
          name: "质控中心",
          value: 3,
          status: "3",
        },
        {
          img: "mulu/kefu.png",
          name: "客服中心",
          value: 4,
          status: "4",
        },
        {
          img: "mulu/dingdian.png",
          name: "统计中心",
          value: 5,
          status: "5",
        },
        {
          img: "mulu/jingyiribao@2x.png",
          name: "经营日报",
          value: 6,
          status: "6",
        },
        {
          img: "mulu/home@2x.png",
          name: "系统管理",
          value: 7,
          status: "7",
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath)
    },
    Headquarters() {
      this.$router.push({
        path: "/HqFinancePanel",
      });
    },
    enter(id) {
      this.activeId = "" + id;
      this.$store.state.app.selectId = id;
    },
  },
};
</script>
<style lang="scss" scoped>
.is-active {
  color: rgb(32, 135, 208) !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
}
.img {
  display: inline-block;
  margin-right: 5px;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  // background: #2087d0;
}
</style>
